<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>长字幕滚动效果</title>
  <script src="../static/js/vue.global.js"></script>
  <style>
    .lyric{
        background: #fff -webkit-linear-gradient(left, #037DF3, #037DF3) no-repeat 0 0;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        background-size: 0 100%;
        white-space: nowrap;
    }
    .talk-liters{
        width: 100%;
        height: 100%;
        background: rgb(187, 184, 184);
        overflow-y: hidden;
        overflow-x: scroll;
    }
    .talk-liters::-webkit-scrollbar {
        display: none;
    }
</style>
</head>
<body>
<div id="app">
    <button @click="start">启动效果</button>
    <div class="talk-liters" ref="superLiters">
        <div class="liters-con" ref="liters">
            <div :style="{'font-size': fontSize+'px'}">
                <font ref="playedFont" class="lyric" :style="style">{{text}}</font>
            </div>
        </div>
    </div>
</div>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return {
        text: '你好，陈先生，这是我们的字幕效果，您可以尝试启动服务看效果。你好，陈先生，这是我们的字幕效果，您可以尝试启动服务看效果。你好，陈先生，这是我们的字幕效果，您可以尝试启动服务看效果。',
        fontSize: 24,
        style: {
            width: '0%'
        }
      }
    },
    methods: {
        start() {
            this.style = {
                width: '0%',
                backgroundSize: '100% 100%',
                transition: 'background-size 10s linear'
            };

        },
        xAxisScroll (container, xStart, xLength, durationInMillis) {
            // if duration is 0 scrollY will be -Infinity
            // cancel if already on top
            // console.log('从' + xStart + ' 到 ' + xLength + ' 需要 ' + durationInMillis + '秒。')
            if (container.scrollLeft === xLength || durationInMillis === 0 || xStart > xLength) return
            let scrollX = xStart
            let oldTimestamp = null
            theVersionOfAnimation++
            let tmpVersion = theVersionOfAnimation
            let timeEstimate = durationInMillis
            function step (newTimestamp) {
            if (tmpVersion !== theVersionOfAnimation) {
                // console.log('动画版本不同，退出当前动画')
                return
            }
            if (oldTimestamp !== null) {
                let durtion = newTimestamp - oldTimestamp
                timeEstimate -= durtion
                scrollX += xLength * (durtion) / durationInMillis
                if (container.scrollLeft >= xLength) {
                return
                }
                // console.log('移动到：' + scrollX)
                if (scrollX > 0) {
                container.scrollLeft = scrollX
                } else if (container.scrollLeft !== 0) {
                container.scrollLeft = 0
                }
                // console.log('当前位于：' + container.scrollLeft)
                if (timeEstimate <= 0) {
                // console.log('超时停止动画')
                return
                }
            }
            oldTimestamp = newTimestamp
            window.requestAnimationFrame(step)
            }
            window.requestAnimationFrame(step)
        }
    }
  }).mount('#app')
</script>
</body>
</html>
